<template>
  <a-modal v-model="currentVisible" :footer="null" width="40%" title="投放" @cancel="currentVisible = false">
    <template v-if="currentVisible && launchObj">
      <div class="item">
        <div class="item-title">原路径：</div>
        <div class="path">
          <div>{{ launchObj.url }}</div>
          <a-button type="link" @click="copy(launchObj.url)">复制</a-button>
        </div>
      </div>
      <div class="item">
        <div class="item-title">加参后路径：</div>
        <div class="path">
          <div>{{ launchObj.parameterUrl }}</div>
          <a-button type="link" @click="copy(launchObj.parameterUrl)">复制</a-button>
        </div>
      </div>


      <img :src="launchObj.codeUrl || ''" alt="渠道码" v-if="launchObj && launchObj.codeUrl" />
      <div class="modal-footer">
        <a-button slot="footer" type="primary" @click="currentVisible = false">我知道了</a-button>

      </div>
    </template>
    <input type="text" id="copy" />

  </a-modal>
</template>
<script>
export default {
  name: 'launchModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    launchObj: {
      type: Object,
      default: () => {
        return { codeUrl: '', parameterUrl: '', url: '' }
      }
    }
  },
  computed: {
    currentVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
        if (val == false) {
          this.$emit('ok')
        }
      }
    },
  },
  methods: {
    copy(text) {
      console.log(text)
      var inputNode = document.getElementById('copy')
      inputNode.value = text // 修改文本框的内容
      inputNode.select() // 选中文本
      const success = document.execCommand('copy') // 执行浏览器复制命令
      if (success) {
        this.$message.success('复制成功')
      } else {
        this.$message.success('浏览器不支持')
      }
    },
  }
}
</script>
<style scoped>
#copy {
  position: fixed;
  top: -200px;
  opacity: 0;
}

.modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

img {
  width: 300px;
  height: 300px;
}

.item-title {
  font-size: 14px;
  font-weight: bold;
}

.path {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}
</style>